<template>
  <div>
    <!-- target(入口句柄) -->
    <Handle type="target" :position="Position.Left" />
    <!-- label -->
    <div class="vue-flow-node-custom2-head">{{ label }}</div>
    <!-- description -->
    <div class="vue-flow-node-custom2-body">{{ data.description }}</div>
    <!-- source(出口句柄) -->
    <Handle type="source" :position="Position.Right" />
  </div>
</template>

<script setup>
import { Handle, Position } from '@vue-flow/core'
defineProps(['label', 'data'])

// const description = ref('')

</script>

<style lang="scss">
// 自定义
.vue-flow__node-custom2 {
  box-sizing: border-box;
  color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
  width: 90px;
  height: 50px;
  font-size: 10px;
  --vf-handle: #41b855;
  --vf-node-color: none;

  &:hover {
    box-shadow: none;
  }
}
.vue-flow__node-custom2.selected {
  border: 1px solid #aaa;
  box-shadow: none;
  .vue-flow-node-custom2-head {
    border-radius: 4px 4px 0 0;
  }
  .vue-flow-node-custom2-body {
    border-radius: 0 0 4px 4px;
    height: 33px;
  }
}
.vue-flow-node-custom2-head {
  // background-color: red;
  background: linear-gradient(to right, #41b855, #f78426);
  width: 100%;
  height: 15px;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  padding: 0 5px;
}
.vue-flow-node-custom2-body {
  background-color: #fff;
  color: #000;
  width: 100%;
  height: 35px;
  border-radius: 0 0 5px 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
</style>
